<template lang="html">
  <div class="" v-loading="loading">
      <div class="tab1">
          <div class="title">{{title}}</div>
          <div class="form" style="border-bottom:none;">
              <div class="form_item">
                  <span> <i>*</i> 店铺名称</span>
                  <el-input v-model="form.mainStoreName" placeholder=""></el-input>
              </div>
              <div class="form_item">
                  <span>管理员账号</span>
                  <el-input v-model="form.adminUserName" placeholder=""></el-input>
              </div>
              <div class="form_item">
                  <span>对客户折扣</span>
                  <el-input type="number" v-model="form.discount" placeholder=""></el-input>
                  <span>%</span>
              </div>

          </div>

      </div>
      <div class="tab1" v-if="!queryId">
          <div class="title">新增分店</div>
          <div class="form" v-for="(item,index) in form2" :key="index">
            <div class="form_item">
                <span> <i>*</i> 店铺名称</span>
                <el-input v-model="item.branchStoreNames" placeholder=""></el-input>
            </div>
            <div class="form_item">
                <span> <i>*</i> 所在区域</span>
                <el-input v-model="item.areas" placeholder=""></el-input>
            </div>
            <div class="form_item">
                <span> <i>*</i> 详细地址</span>
                <el-input v-model="item.addresss" placeholder=""></el-input>
            </div>
            <div class="form_item">
                <span>联系方式</span>
                <el-input type="number" v-model="item.phones" placeholder=""></el-input>
            </div>
            <div class="form_item">
                <span>管理员账号</span>
                <el-input v-model="item.brachUserNames" placeholder=""></el-input>
            </div>
            <div class="form_item">
              <div class="remove_btn">
                <el-button type="text" v-if="index == (form2.length-1) && index != 0" size="medium" @click="handleRemoveBranch">删除分店</el-button>
              </div>
            </div>
          </div>

          <div style="padding-left:50px;">
            <el-button type="text" size="medium" @click="handleAddBranch">添加分店</el-button>
          </div>

      </div>
      <div style="background:#fff">
        <div class="submit_form">
            <el-button type="primary" size="medium" @click="submit">保存</el-button>
        </div>
      </div>


  </div>
</template>

<script>
export default {
  data(){
    return {
      loading:false,
      form: {
        mainStoreName: '',
        adminUserName: '',
        discount: '',
      },
      form2:[
        {
          branchStoreNames:'',
          areas:'',
          addresss:'',
          phones:'',
          brachUserNames:'',
        }
      ],


    }
  },
  computed:{
    queryId: function () {
      return this.$route.query.id;
    },
    title: function() {
      return this.$route.query.title;
    }
  },
  created(){
    if(this.queryId){
      this.selectMainStore();
    }
  },
  beforeRouteEnter(to, from, next){
    next(vm=>{
      vm.$route.meta.title = vm.title;
    });
  },
  methods: {
    selectMainStore(){
      this.loading = true;
      this.$http.selectMainStore({id:this.queryId}).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.form.mainStoreName = res.data.data.mainStoreName;
          this.form.adminUserName = res.data.data.adminUserName;
          this.form.discount = res.data.data.discount;
        }
      });
    },
    handleAddBranch(){
      this.form2.push({
        branchStoreNames:'',
        areas:'',
        addresss:'',
        phones:'',
        brachUserNames:'',
      })
    },
    handleRemoveBranch(){
      this.form2.pop()
    },
    insertStore(data){
      this.loading = true;
      this.$http.insertStore(data).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.$message.success(res.data.message);
          this.$router.push('/shop/list/shop_list');
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    updateStore(data){
      this.loading = true;
      this.$http.updateStore(data).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.$message.success(res.data.message);
          this.$router.push('/shop/list/shop_list');
        }else{
          this.$message.error(res.data.message);
        }
      });
    },

    submit(){
      if(!this.form.mainStoreName){
        this.$message.error('请填写主店名称！！！');
        return false;
      }
      if(this.queryId){
        let data = {
          id: this.queryId,
          mainStoreName: this.form.mainStoreName,
          adminUserName: this.form.adminUserName,
          discount: this.form.discount
        }
        this.updateStore(data);
      }else{
        let data = {
          mainStoreName: this.form.mainStoreName,
          adminUserName: this.form.adminUserName,
          discount: this.form.discount,
          branchStoreNames: [],
          areas: [],
          addresss: [],
          phones: [],
          brachUserNames: [],
        };
        for(let i=0;i<this.form2.length;i++){
          if(!this.form2[i].branchStoreNames){
            this.$message.error('请填写分店名称！！！');
            return false;
          }else if(!this.form2[i].areas){
            this.$message.error('请填写所属区域！！！');
            return false;
          }else if(!this.form2[i].addresss){
            this.$message.error('请填写详细地址名称！！！');
            return false;
          }else{
            data.branchStoreNames.push(this.form2[i].branchStoreNames);
            data.areas.push(this.form2[i].areas);
            data.addresss.push(this.form2[i].addresss);
            data.phones.push(this.form2[i].phones);
            data.brachUserNames.push(this.form2[i].brachUserNames);
          }
        }
        this.insertStore(data);
      }

    },

  }
}
</script>

<style lang="css" scoped>
.tab1{
  background: #fff;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #E8E8E8;
}
.form i{
  font-style: normal;
  color: #FB3F3F
}
.form{
  width: 90%;
  padding: 20px 0 10px;
  margin-left: 50px;
  border-bottom: 1px solid #e8e8e8;
}
.form .remove_btn{
  width: 320px;
  text-align: right
}
/deep/.remove_btn .el-button--text{
  color: #FB3F3F
}
.form .form_item{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.form .form_item span{
  display:inline-block;
  width: 100px;
  font-size: 13px;
  color: #333333;
  margin-right: 10px
}

.form_item .el-input{
  width: 200px
}
.title{
  width: 100%;
  color: #4196FF;
  padding: 12px 15px;
  background-color:#DAEBFF;
  box-sizing: border-box;
}
.form2 .form_title{
  font-size: 13px;
  color: #333333;
  margin-right: 10px;
  line-height: 60px;
  height: 40px;
  margin-left: 50px
}

.submit_form{
  padding: 30px 0;
  text-align: center;
}
</style>
